<template>
    <div class="newsInfo_big_box">
        <h1 class='title'>{{newsInfo.title}}</h1>
        <p class="subtitle">
            <span>发表时间：{{newsInfo.add_time | dateFormat()}}</span>
            <span>点击：{{newsInfo.click}}次</span>
            
        </p>
        <hr>
        <div class="content">
            <!-- 内容区域 -->
            <span v-html='newsInfo.content'></span>
        </div>

        <hr>
        <comment :id='id'></comment>
        
    </div>
</template>
<script>
import {Toast} from 'mint-ui'
import comment from '../comment.vue'
export default {
    data(){
        return{
            id:this.$route.params.id,
            // 将传过来的参数直接挂载到id上，便于使用。
            newsInfo:{}
        }
    },
    methods:{
        getNewsInfo(){
            this.$axios.get('api/getnew/'  + this.id)
            .then(response=>{
                //  Toast({
                //     message:'获取成功!',
                //     duration:1000
                // })
                // console.log(response.data.message[0])
                this.newsInfo=response.data.message[0];
                
            })
            .catch(error=>{
                Toast({
                    message:'获取失败，请刷新重试!'+ error,
                    duration:10000
                })
            })
        }
    },
    created(){
        this.getNewsInfo();
        console.log("ok")
    },
    components:{
        comment:comment
    }
}
</script>
<style lang="scss" scoped>
.newsInfo_big_box{
    padding: 0 5px 0 5px;
    margin-top: 50px;

        .title{
            color: red;
            font-size: 15px;
            text-align: center;
        }
        .subtitle{
            color: #226aff;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
        }
        .content{
            font-size: 12px;
            img{
                width: 100%;

            }
        }
}


</style>